<template>
  <div class="picture">
    <content-pan-topbar>
      <template v-slot:btns>
        <el-button
          type="default"
          size="small"
          :class="curImgMode === 'default' ? 'ow-button__no_border active' : 'ow-button__no_border'"
          @click="btnClick('default')"
        >默认</el-button>
        <el-button
          type="default"
          size="small"
          :class="curImgMode === 'intelligentSort' ? 'ow-button__no_border active' : 'ow-button__no_border'"
          @click="btnClick('intelligentSort')"
        >智能分类</el-button>
        <el-button
          type="default"
          size="small"
          :class="curImgMode === 'curUpload' ? 'ow-button__no_border active' : 'ow-button__no_border'"
          @click="btnClick('curUpload')"
        >最近上传</el-button>
      </template>
      <template v-slot:extra-icon>
        <div></div>
        <!-- <i class="el-icon-s-tools search-icon"></i> -->
      </template>
    </content-pan-topbar>
    <div class="picture-table">
      <!-- 默认分类 || 最近上传 -->
      <div v-if="curImgMode !== 'intelligentSort'">
        <div v-for="(item) in showImgList" :key="item.id" class="img-item" @click="viewImg(item)">
          <img :src="item.url" alt="img">
        </div>
      </div>
      <!-- 智能分类 -->
      <div v-else-if="curImgMode === 'intelligentSort'">
        <div v-for="(item, i) in showImgModeList" :key="i">
          <div class="sortTitle">{{ i }}</div>
          <div v-for="(single, j) in showImgModeList[i]" :key="j" class="img-item" @click="viewImg(single)">
            <img :src="single.url" alt="img">
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="图片查看" :visible.sync="dialogTableVisible" class="picture-dialog">
      <img :src="curImg" alt="img" style="max-width: 100%;">
    </el-dialog>
  </div>
</template>

<script>
import ContentPanTopbar from '@/views/Content/ContentPan/component/ContentPanTopbar';

export default {
  name: 'Picture',
  components: { ContentPanTopbar },
  data() {
    return {
      imgList: [
        { id: 0, url: require('../../../assets/images/ContentImgs/ContentPictures/1.jpg'), type: '动物' },
        { id: 1, url: require('../../../assets/images/ContentImgs/ContentPictures/2.png'), type: '风景' },
        { id: 2, url: require('../../../assets/images/ContentImgs/ContentPictures/3.jpg'), type: '人物' },
        { id: 3, url: require('../../../assets/images/ContentImgs/ContentPictures/4.jpg'), type: '人物' },
        { id: 4, url: require('../../../assets/images/ContentImgs/ContentPictures/5.jpg'), type: '人物' },
        { id: 5, url: require('../../../assets/images/ContentImgs/ContentPictures/6.png'), type: '人物' },
        { id: 6, url: require('../../../assets/images/ContentImgs/ContentPictures/7.jpg'), type: '人物' },
        { id: 7, url: require('../../../assets/images/ContentImgs/ContentPictures/8.jpg'), type: '人物' },
        { id: 8, url: require('../../../assets/images/ContentImgs/ContentPictures/9.jpeg'), type: '人物' },
        { id: 9, url: require('../../../assets/images/ContentImgs/ContentPictures/10.jpg'), type: '事件' },
        { id: 10, url: require('../../../assets/images/ContentImgs/ContentPictures/11.jpeg'), type: '其他' },
        { id: 11, url: require('../../../assets/images/ContentImgs/ContentPictures/12.jpg'), type: '人物' },
      ],
      showImgList: [],
      showImgModeList: {},
      dialogTableVisible: false,
      curImg: '',
      curImgMode: 'default',
    }
  },
  methods: {
    btnClick(item) {
      this.curImgMode = item;
      switch(item) {
        case 'default':
          this.showImgList = this.imgList;
          break;
        case 'intelligentSort':
          this.showImgModeList['人物'] = this.imgList.filter(item => item.type === '人物');
          this.showImgModeList['动物'] = this.imgList.filter(item => item.type === '动物');
          this.showImgModeList['风景'] = this.imgList.filter(item => item.type === '风景');
          this.showImgModeList['事件'] = this.imgList.filter(item => item.type === '事件');
          this.showImgModeList['其他'] = this.imgList.filter(item => item.type === '其他');
          console.log(this.showImgModeList);
          break;
        case 'curUpload':
          this.showImgList = [
            { url: require('../../../assets/images/ContentImgs/ContentPictures/1.jpg') },
            { url: require('../../../assets/images/ContentImgs/ContentPictures/4.jpg') },
            { url: require('../../../assets/images/ContentImgs/ContentPictures/8.jpg') },
            { url: require('../../../assets/images/ContentImgs/ContentPictures/11.jpeg') },
          ];
          break;
      }
    },
    viewImg(item) {
      this.dialogTableVisible = true;
      this.curImg = item.url;
    }
  },
  mounted() {
    this.showImgList = this.imgList;
    this.$bus.$on('tableDataSearch', () => {
      this.$message.warning('图片不支持查询功能');
    })
  },
  beforeDestroy() {
    this.$bus.$off('tableDataSearch');
  },
}
</script>

<style lang="less">
.picture {
  height: 100%;

  .picture-table {
    margin-top: 10px;
    height: calc(100% - 35px);
    overflow: auto;

    .img-item {
      display: inline-block;
      width: 153px;
      height: 153px;
      margin: 5.3px;

      img {
        width: 153px;
        height: 153px;
        cursor: pointer;
      }
    }
  }

  .picture-dialog {
    .el-dialog__body {
      padding: 10px 20px 30px;
    }
    text-align: center;
  }

  .sortTitle {
    margin: 10px 0;
    font-weight: 600;
    font-size: 14px;
    color: #4e5971;
  }
}
</style>